<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" ref="formInline" class="formInline" label-width="76px" 
            label-position="right"  slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId" ></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                             <school v-model="formInline.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                         <el-form-item label="学校类型">
                                <el-select v-model="formInline.schoolType" placeholder="请选择学校类型"
                                style="width:100%">
                                    <el-option v-for="(item,index) in schoolTypeArr" 
                                    :key="index" :label="item.sName" :value="item.pId"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                </div>
            </el-form>
           <div class="table-title" slot="table-title">
                 <div class="btnPosition">
                    <exportExcel @ee="exportExcel"></exportExcel>
                </div>
            </div>
           <el-table  border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange"> 
                <el-table-column align="center" label="学校名称" >
                     <template scope="scope">
                        <span>{{ scope.row.schoolName | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="学校类型" >
                     <template scope="scope">
                        <span>{{ scope.row.schoolType? scope.row.schoolType :'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" sortable="custom" label="班级数量" prop="allClasses" min-width="100px">
                     <template scope="scope">
                        <span>{{ scope.row.allClasses| isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" sortable="custom" label="教师人数" prop="allTeacher" min-width="100px">
                     <template scope="scope">
                        <span>{{ scope.row.allTeacher| isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" sortable="custom" label="家长人数" prop="allParent" min-width="100px">
                     <template scope="scope">
                        <span>{{ scope.row.allParent| isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" sortable="custom" label="学生人数" prop="allStudent" min-width="100px">
                     <template scope="scope">
                        <span>{{ scope.row.allStudent| isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="区域" prop="area">
                     <template scope="scope">
                        <span>{{ scope.row.area| isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="城市" prop="city">
                     <template scope="scope">
                        <span>{{ scope.row.city | isNull }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="省份" prop="province">
                     <template scope="scope">
                        <span>{{ scope.row.province | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="统计日期" prop="date" min-width="90">
                     <template scope="scope">
                        <span>{{ scope.row.date | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import {getUserBySchool} from 'api/reportForms';
import {listSchoolPeriod} from 'api/schoolManage';
import exportExcel from 'components/ExportExcel/index'; 
export default{
    name: 'schoolStaticList',
    components: {exportExcel, TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {// form表单数据
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                schoolId: '',
                schoolType: '',
                provinceName: '',
                cityName: '',
                areaName: '',
                schoolName: '',
                schoolTypeName: ''
            },
            schoolTypeArr: [],
            allTeacherStatus: '1', // 默认降序
            allParentStatus: '',
            allClassesStatus: '',
            allStudentStatus: '',
            AnnounceList: [],
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true
        }
    },
   
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.getSchTypeList();// 获取学校类型的列表
        this.searchFetchData();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        sortChange({ column, prop, order }) {
            this.userCountStatus=prop=='userCount'?order=='ascending'?0:1:'';
            this.allTeacherStatus=prop=='allTeacher'?order=='ascending'?0:1:'';
            this.allParentStatus=prop=='allParent'?order=='ascending'?0:1:'';
            this.allClassesStatus=prop=='allClasses'?order=='ascending'?0:1:'';
            this.allStudentStatus=prop=='allStudent'?order=='ascending'?0:1:'';
            this.searchFetchData();
        },
         // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 获取学校类型
        getSchTypeList() {
            listSchoolPeriod().then(response => {
                let schoolType = response.data.content;
                let select = {
                    sName: '请选择',
                    pId: ''
                }
                schoolType.unshift(select);
                this.schoolTypeArr = schoolType;
            });
        },
                 
        // 查询列表               
        searchFetchData() {
            this.loading = true;
            let page=this.listQuery.page,
                rows=this.config.pageSize,
                allTeacherStatus=this.allTeacherStatus,
                allParentStatus=this.allParentStatus,
                provinceId=this.formInline.fProvinceId,
                cityId=this.formInline.fCityId,
                areaId=this.formInline.fAreaId,
                schoolId=this.formInline.schoolId,
                schoolTypeId=this.formInline.schoolType,
                allClassesStatus=this.allClassesStatus,
                allStudentStatus=this.allStudentStatus;
            getUserBySchool(page, rows, allTeacherStatus, allParentStatus, provinceId, cityId, areaId, schoolId, schoolTypeId, allClassesStatus, allStudentStatus).then(res => {
                this.loading = false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading = false;
            });
        },
        exportExcel() {
            let userId=this.uid, // 登录人id
                allTeacherStatus=this.allTeacherStatus,
                allParentStatus=this.allParentStatus,
                provinceId=this.formInline.fProvinceId,
                cityId=this.formInline.fCityId,
                areaId=this.formInline.fAreaId,
                schoolId=this.formInline.schoolId,
                schoolTypeId=this.formInline.schoolType,
                allClassesStatus=this.allClassesStatus,
                allStudentStatus=this.allStudentStatus;
            window.location.href = `${LOCAL_API.scy}/report/exportUserBySchool?userId=${userId}&allTeacherStatus=${allTeacherStatus}&allParentStatus=${allParentStatus}&provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&schoolId=${schoolId}&schoolTypeId=${schoolTypeId}&allClassesStatus=${allClassesStatus}&allStudentStatus=${allStudentStatus}`.trim()
            // exportSchoolByArea(userId, allTeacherStatus, allParentStatus, provinceId, cityId, areaId, schoolId, schoolTypeId, allClassesStatus, allStudentStatus).then(res => {
            //     console.log()
            // })
        },
        // 表单查询
        onSubmit() {
            this.loading = true;
            this.listQuery.page = 1;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
            margin-left:5px;
            background:#f9f9f9;
            color:#444;
        }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .footer{
            text-align:center;
            margin-top:40px;
        }
    .footer .el-button{
            padding:10px 40px;
        }
}

</style>